@use "../helper";
@use "../variable";

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0;
  padding-top: variable.$headings-margin-top;
  padding-bottom: variable.$headings-margin-bottom;
  font-family: variable.$headings-font-family;
  font-weight: variable.$headings-font-weight;
  color: helper.hex(variable.$headings-color);
  text-align: left;
  vertical-align: baseline;
}

@each $name, $size in variable.$headings {
  h#{$name}, .h#{$name} {
    font-size: $size;
    line-height: $size * variable.$headings-line-height;
  }
}

@each $name, $size in variable.$font-size {
  .text-#{$name} {
    font-size: $size;
    line-height: $size * variable.$headings-line-height;
  }
}

@each $name, $size in variable.$line-height {
  .lh-#{$name} {
    line-height: $size;
  }
}

@for $n from 1 through 9 {
  @include helper.font-weight-util('.fw-#{$n * 100}') {
    font-weight: #{$n * 100} !important;
  }
}

@each $align in variable.$text-align {
  @include helper.text-align-util('.text-#{$align}') {
    text-align: $align !important;
  }
}

p {
  width: 100%;
  margin: 0;
}
